<script setup>
import {reactive} from "vue";
import {requestGetInfo} from "@/api";

const routerGroup = reactive({
  linkIndex() {
    uni.redirectTo({url: "../index/index"});
  },
  linkOrder() {
    uni.redirectTo({url: "../order/order"});
  },
  linkUser() {
    uni.redirectTo({url: "../user/user"});
  },
  linkUserInfo() {
    if (storageGroup.userinfo){
      uni.navigateTo({url: "../userInfo/userInfo"});
    }
  },
  linkAboutUs() {
    uni.navigateTo({url: "../aboutUs/aboutUs"});
  },
  linkContactUs() {
    uni.navigateTo({url: "../contactUs/contactUs"});
  },
  linkLogin() {
    uni.navigateTo({url: "../login/login"})
  },
  linkChangePassword() {
    uni.navigateTo({url: "../changePassword/changePassword"})
  },
  linkCollect(){
    uni.navigateTo({url: "../collect/collect"})
  }
})

const userInfoGroup = reactive({
  username: "",
  async getUserInfo(account) {
    let result = await requestGetInfo({account: account})
    if (result.statusCode === 200) {
      this.username = result.data[0].username;
    }
  }
})

const storageGroup = reactive({
  userinfo: uni.getStorageSync("userInfo"),
  initUsername() {
    if (this.userinfo.login_state) {
      userInfoGroup.getUserInfo(this.userinfo.account);
    }
  }
})

storageGroup.initUsername();
</script>

<template>
  <view class="user">
    <scroll-view scroll-y="true">
      <view class="top">
        <view class="top-box">
          <van-image
              round
              width="150rpx"
              height="150rpx;"
              src="http://118.178.254.102:1251/user/head.jpg"
          />
          <view>
            <text class="top-text" v-if="!storageGroup.userinfo.login_state" @click="routerGroup.linkLogin()">登录/注册
            </text>
            <text class="top-text" v-if="storageGroup.userinfo.login_state" @click="routerGroup.linkUserInfo()">
              {{ userInfoGroup.username }}
            </text>
          </view>
        </view>
      </view>
      <view class="main">
        <view class="container-box">
          <view class="main-top-box">
            <view class="main-top-list">
              <view class="main-top-list-item">
                <button class="main-top-list-item-button" @click="routerGroup.linkUserInfo()">
                  <van-icon name="contact" size="40rpx" />
                  <text class="main-top-list-item-button-text">个人信息</text>
                </button>
              </view>
              <view class="main-top-list-item">
                <button class="main-top-list-item-button" @click="routerGroup.linkOrder()">
                  <van-icon name="cart" size="40rpx"/>
                  <text class="main-top-list-item-button-text">我的订单</text>
                </button>
              </view>
              <view class="main-top-list-item">
                <button class="main-top-list-item-button" @click="routerGroup.linkCollect()">
                  <van-icon name="star" size="40rpx"/>
                  <text class="main-top-list-item-button-text">我的收藏</text>
                </button>
              </view>
            </view>
          </view>
          <view class="main-under-box">
            <view class="list-box">
              <view class="list-item">
                <text class="item-btn" @click="routerGroup.linkChangePassword()">修改密码</text>
              </view>
              <view class="list-item">
                <text class="item-btn" @click="routerGroup.linkContactUs()">联系我们</text>
              </view>
              <view class="list-item">
                <text class="item-btn" @click="routerGroup.linkAboutUs()">关于我们</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view>
    <van-row>
      <van-tabbar>
        <van-tabbar-item icon="home-o" @click="routerGroup.linkIndex">首页</van-tabbar-item>
        <van-tabbar-item icon="search" @click="routerGroup.linkOrder">订单</van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="routerGroup.linkUser">我的</van-tabbar-item>
      </van-tabbar>
    </van-row>
  </view>
</template>

<style scoped src="../../css/user.css">

</style>
